import { useState } from 'react'
import GameBoard from './components/GameBoard'
import './App.css'

function App() {
  const [showRules, setShowRules] = useState(false);

  return (
    <div className="app">
      <h1>打地鼠游戏</h1>
      
      {/* 游戏规则按钮 */}
      <button 
        className="rules-button"
        onClick={() => setShowRules(true)}
      >
        游戏规则
      </button>

      <GameBoard />

      {/* 游戏规则弹窗 */}
      {showRules && (
        <div className="rules-overlay">
          <div className="rules-dialog">
            <h2>游戏规则</h2>
            <ul>
              <li>点击出现的地鼠得分</li>
              <li>游戏时间30秒</li>
              <li>难度越高，地鼠出现速度越快</li>
            </ul>
            <button onClick={() => setShowRules(false)}>
              知道了
            </button>
          </div>
        </div>
      )}

      {/* 页脚 */}
      <footer className="footer">
        <p>开心打地鼠 v1.0</p>
      </footer>
    </div>
  );
}

export default App;
